<template>
    <div class="recharge">
        <el-dialog
            title="支付小竹叶"
            :visible.sync="show"
            width="408px"
            :append-to-body="true"
            @open="changeShow(true)"
            @close="changeShow(false)"
        >
            <div class="pay-dialog">
                <template
                    v-if="
                        userInfo && userInfo.free_coupon > 0 && !$route.query.id
                    "
                >
                    <div class="money">0</div>
                </template>
                <template v-else>
                    <!-- <div
                        v-if="couponList.length > 0 && checkIndex != null"
                        class="money"
                    >
                        {{
                            couponList[checkIndex].num_text == 0
                                ? 0
                                : (
                                      parseInt(money) *
                                      (couponList[checkIndex].num_text / 10)
                                  ).toFixed(1)
                        }}
                        {{ parseInt(money) }}
                    </div> -->
                    <div class="money">
                        {{ money }}
                    </div>
                </template>
                <div class="money-text">小竹叶</div>
                <div
                    v-if="userInfo != null"
                    class="cell"
                    style="border-bottom: 1px solid #e8e8e8"
                >
                    当前小竹叶：{{ userInfo.money }}
                    <div class="goshop" @click="goshop">去充值</div>
                </div>

                <div class="but" style="padding-top: 33px">
                    <el-button
                        slot="reference"
                        type="primary"
                        class="but-pay"
                        round
                        @click="pay"
                    >
                        确定支付
                    </el-button>
                </div>
            </div>
        </el-dialog>
        <div class="coupon-dialog">
            <el-dialog
                :visible.sync="couponShow"
                width="392px"
                :append-to-body="show"
                :custom-class="show ? 'dialog-right' : ''"
                :modal="!show"
            >
                <div class="coupon-title">选择优惠券</div>
                <div class="coupon-list">
                    <div
                        v-for="(item, index) in couponList"
                        :key="index"
                        class="coupon-item"
                        @click="selectCoupon(index)"
                    >
                        <div class="type" :class="{ type0: item.status == 2 }">
                            <div>
                                {{
                                    item.num_text == 0
                                        ? "免单"
                                        : item.num_text + "折"
                                }}
                            </div>
                            优惠券
                        </div>
                        <div class="line"></div>
                        <div class="title">
                            <div>
                                {{
                                    item.type == 1 ? "普通问答券" : "专家问答券"
                                }}
                            </div>
                            {{ item.endtime_text }}到期
                        </div>
                        <div class="radio">
                            <i
                                :class="
                                    checkIndex == index
                                        ? 'el-icon-success'
                                        : 'el-icon-circle-check'
                                "
                            ></i>
                        </div>
                    </div>
                </div>
                <div class="but" @click="couponShow = false">确定</div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { getCouponList } from "@/assets/api/userCenterApi";
export default {
    components: {},
    name: "recharge",
    props: {
        money: {
            type: Number,
            default: 0,
        },
        payShow: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
    },
    watch: {
        payShow(n, o) {
            this.show = n;
            try {
                if (n) this.getUserInfo();
            } catch (error) {}
        },
    },
    mounted() {
        // this.getUserInfo();
        this.show = this.payShow;
        this.getCouponList(1);
    },
    data() {
        return {
            show: false,
            couponShow: false,
            couponList: [],
            checkIndex: 0,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    methods: {
        ...mapActions("common", ["getUserInfo"]),

        pay() {
            if (this.couponList.length > 0 && this.checkIndex != null)
                this.$emit("pay", this.couponList[this.checkIndex]);
            else this.$emit("pay");
            // this.getUserInfo()
        },

        showCoupon() {
            this.show = false;
            this.couponShow = true;
        },

        changeShow(is) {
            this.$emit("changeShow", is);
        },

        goshop() {
            this.$router.push({ path: "/user/mybamboo" });
        },

        checkCoupon() {
            if (this.couponList.length == 0) return;

            this.couponShow = true;
        },

        // 选则优惠券
        selectCoupon(index) {
            if (this.checkIndex == index) this.checkIndex = null;
            else this.checkIndex = index;
        },

        async getCouponList(status) {
            const res = await getCouponList({
                status: 0,
                is_effective: 1,
            });
            if (res.code == 1) {
                let minIndex = null;
                for (let item of res.data.list) {
                    this.couponList.push(item); // 只有专家问答优惠券了
                    // if (this.$route.query.id && item.type == 2) {
                    //     this.couponList.push(item);
                    // } else if (!this.$route.query.id && item.type == 1) {
                    //     this.couponList.push(item);
                    // }
                }
                
                if (this.couponList.length > 0) minIndex = 0;

                // for (let i = 0; i < this.couponList.length; i++) {
                //     if (
                //         this.couponList[minIndex].num_text >
                //         this.couponList[i].num_text
                //     ) {
                //         minIndex = i;
                //     }
                // }
                this.checkIndex = minIndex;
                this.$emit("couponEvent", this.couponList, this.checkIndex);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/assets/static/payDialog.scss";

.cell {
    display: flex;
    justify-content: space-between;
    .goshop {
        cursor: pointer;
        color: #1c87f3;
        text-decoration: underline;
    }
    .coupon {
        cursor: pointer;
        color: #ff6161;
    }
    .tishi {
        color: #b3b3b3;
    }
}

.coupon-list {
    height: 276px;
    overflow-y: auto;
    padding: 0 20px;
    &::-webkit-scrollbar {
        width: 2px;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #fff;
    }
    &::-webkit-scrollbar-track {
        border-radius: 0;
    }
}
.coupon-item {
    display: flex;
    align-items: center;
    width: 349px;
    height: 78px;
    padding: 16px 20px;
    margin-bottom: 17px;
    cursor: pointer;
    background: linear-gradient(90deg, #fff4e2 0%, #fffffe 100%);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    .type {
        width: 65px;
        font-size: 18px;
        font-weight: 500;
        color: #ff6161;
        text-align: center;
        div {
            font-size: 22px;
            font-weight: 700;
            color: #ff6161;
        }
    }

    .line {
        height: 46px;
        width: 0px;
        border-left: 1px dashed #fa5151;
        margin: 0 26px;
    }

    .title {
        width: 159px;
        // padding-left: 25px;
        font-size: 12px;
        font-weight: 500;
        color: #999999;
        div {
            font-size: 16px;
            font-weight: 700;
            color: #eb5b36;
            padding-bottom: 5px;
        }
    }
    .radio {
        font-size: 24px;
        .el-icon-circle-check {
            color: #999999;
        }
        .el-icon-success {
            color: #ff6161;
        }
    }
}

.coupon-dialog {
    .coupon-title {
        font-size: 22px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        padding-bottom: 15px;
    }
    .but {
        margin: 18px auto 0;
        width: 341px;
        height: 55px;
        line-height: 55px;
        text-align: center;
        background: #ffcc66;
        border-radius: 55px;
        font-size: 20px;
        font-family: OPPOSans, OPPOSans;
        font-weight: 500;
        color: #79550c;
        user-select: none;
        cursor: pointer;
        &:hover {
            opacity: 0.9;
        }
        &:active {
            opacity: 1;
        }
    }
    ::v-deep .el-dialog {
        background: #fa5151;
        border-radius: 8px;
    }

    ::v-deep .el-dialog__header {
        padding: 0;
    }
    ::v-deep .el-dialog__close {
        color: #ffffff;
    }
    ::v-deep .el-dialog__body {
        padding: 14px 0 30px;
    }
}
</style>